<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img {
            width: 200px;
        }
    </style>
</head>

<body>
    <div id="box">
        <img src="./img/2.jpg">
        <img src="./img/4.jpg">
        <img src="./img/5.jpg">
        <hr>


    </div>
    <div class="box">

    </div>
    <script src="./lib/jquery.min.js"></script>
    <script>
        $(function(){
            // $('img').on("click", () => {
            //    console.log($(this).attr('src'));
            // });
            $('img').click(function () {
                // var src = $(this).attr('src');
                console.log(this);
                // that = $(this).clone();
                $('.box').html(this);
                // console.log($('.box').html());
                // console.log($(this).attr('src'));
                // $('.box').html('<img src=' + src + ' />');
            })
        })
    </script>
</body>

</html>